<template>
    <div class="ziliaowraps">
        <div class="zlhdwrap">
            <span>个人资料</span>
        </div>
        <div class="zldetal">
            <div class="zlde">
                <div class="sns-nf">
                    <div class="sns-title">
                        亲爱的
                        <b class="snsname">{{yhid}}</b>
                        填写真实的资料，有助于好友找到你哦。
                    </div>
                    <form action="" enctype="multipart/form-data">
                        <div class="partss">
                            <p class="clearfix">
                                <label class="accc">当前头像：</label>
                                <span class="avator-wrap">
                                    <img :src="'/img/'+arr.himg" alt="" class="avaimg">
                                    <a href="javascript:;" class="avator">编辑头像 <input type="file" name="filename" class="avators" placeholder="编辑头像" @change="update"></a>
                                   
                                </span>
                                <span class="kkk">
                                    <span class="xintxwrap clearfix">
                                        <span class="fl xsss"> 新头像：</span>
                                            <span class="avator-wrap">
                                                <img :src="newsrc" alt="" class="avaimg">
                                            </span>
                                    </span>
                                </span>
                            </p>
                            <p class="h25">
                                <label for="" class="accc"><em>*</em>昵称：</label>
                                <input type="text" maxlength="25" class="f-txt" v-model="nicheng">
                            </p>
                            <p class="h25">
                                <span>*昵称填写须知：与淘宝业务或卖家品牌冲突的昵称，淘宝将有可能收回</span>
                            </p>
                            <p class="h25">
                                <label for="" class="accc">真实姓名：</label>
                                <input type="text" class="zhenshiname" maxlength="6" v-model="zhenname">
                            </p>
                            <p class="h25">
                                <label for="" class="accc"><em>*</em>性别：</label>
                                <label for="" class="xingbie">
                                    <input type="radio" @click="ckeck($event.target.value)" value="1" name="xb" class="nan">男
                                </label>
                                <label for="" class="xingbie">
                                    <input @click="ckeck($event.target.value)" type="radio" value="0" name="xb" class="nv">女
                                </label>
                            </p>
                        </div>
                        <div class="bcbtnwrap">
                            <span class="bcbtns">
                                <button class="bcbtn" type="button" @click="baocun">保存</button>
                            </span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    methods:{
        baocun(){
            console.log(this.nicheng,this.zhenname,this.sex)
            if(!this.zhenname && !this.nicheng){
                 this.$toast({
                    message:"请完善数据",
                    duration:2000
                })
                return false
            }
            var table=new FormData()
            table.append('file',this.file)
            table.append("nicheng",this.nicheng)
            table.append("zname",this.zhenname)
            table.append("sex",this.sex)
            console.log(table.get("file"))
            axios.post("/api/gxinxi",table).then((data)=>{
                if(data.data.num){
                    if(data.data.num==2){
                         this.$toast({
                            message:"请上传正确图片格式，jpg,jpeg,png",
                            duration:2000
                        })
                        return false
                    }else{
                         this.$toast({
                            message:"请完善数据",
                            duration:2000
                        })
                        return false
                    }
                }else{
                     this.$toast({
                        message:"保存成功",
                        duration:2000
                    })
                    var _this=this
                    setTimeout(function(){
                        window.location.href="http://localhost:8080/#/geren"
                    },1000)
                }
            })
        },
        update(e){
            let kk=document.getElementsByClassName("kkk")[0]
            console.log(e)
            let file=e.target.files[0]
            this.file=file
            console.log(file)
            let filereader=new FileReader()
            filereader.readAsDataURL(file)
            var _this=this
            filereader.onload=function(readerRes){
                var news=readerRes.target.result
                _this.newsrc=news
            }
            kk.style.display="inline-block"
        },
        ckeck(val){
            this.sex=val
        }
    },
    data(){
        return{
            arr:'',
            yhid:"",
            nicheng:"",
            file:"",
            newsrc:"",
            sex:"",
            zhenname:""
        }
    },
    created(){
        axios.post("/api/gerenxinxi").then((data)=>{
            var nan=document.getElementsByClassName('nan')[0]
            var nv=document.getElementsByClassName('nv')[0]
            if(data.data){
                this.arr=data.data[0]
                this.yhid=this.arr.UID.replace(/^(.).*(.)$/,"$1***$2")
                this.nicheng=this.arr.uname
                this.sex=this.arr.sex
                if(this.sex==1){
                    console.log(1)
                    nan.checked='checked'
                }else{
                    nv.checked='checked'
                }
            }else{
                 this.$toast({
                    message:"数据异常",
                    duration:1000
                })
                this.$router.push("/")
            }
        })
    }
}
</script>

<style>
.avators{
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}
em{
    margin-right: 6px;
}
    .ziliaowraps{
        margin-top: 10px;
    }
    .zlhdwrap{
        border: 1px solid #D1D1D1;
        padding: 5px 10px 4px;
    }
    .zlhdwrap span{
        color: #666;
        font-weight: 700;
        font-size: 14px;
    }
    .zlde{
        border: 1px solid #dcdcdc;
        padding: 10px;
        background-color: #fff;
        position: relative;
        zoom: 1;
        border-top: none;
    }
    .sns-nf{
        width: 760px;
        margin: 0 auto;
        padding: 10px 0;
    }
    .sns-title{
        font-size: 15px;
        margin: 10px 0;
        color: #525252;
    }
    .snsname{
        margin: 0 4px;
        font-size: 15px;
    }
    .partss{
        padding: 10px 0;
        margin-bottom: 10px;
        zoom: 1;
    }
    .partss p{
        position: relative;
        padding-left: 6em;
        margin-bottom: 10px;
        width: 100%;
    }
    .h25{
        height: 25px;
    }
    .avator-wrap{
        display: inline-block;
        position: relative;
        border: 3px solid #e6e6e6;
        width: 80px;
        height: 80px;
    }
    .avaimg{
        width: 100%;
        height: 100%;
        display: table-cell;
        vertical-align: middle;
        text-align: center;     
    }
    .accc{
        position: absolute;
        vertical-align: middle;
        left: 0;
        height: 26px;
        line-height: 26px;
        display: block;
    }
    .avator{
        display: none;
        background: #000;
        background-position: 10px 6px;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 21px;
        line-height: 21px;
        text-align: center;
        color: #e1d7ca;
        opacity: .7;
    }
    .avator-wrap:hover .avator{
        display: block;
        color: #e1d7ca;
        text-decoration: underline;
    }
    .f-txt{
        padding: 5px;
        border: 1px solid #cecece;
        width: 320px;
    }
    .zhenshiname{
        width: 136px;
        padding: 5px;
        border: 1px solid #cecece;
    }
    .xingbie{
        width: auto;
        margin-right: 10px;
        position: static;
        display: inline;
        vertical-align: middle;
        left: 0;
        height: 26px;
        line-height: 26px;
    }
    .xingbie input{
        margin-right: 3px;
    }
    .xintxwrap{
        display: inline-block;
        margin-left: 10px;
    }
    .xsss{
        margin-right: 10px;
    }
    .kkk{
        display: none;
    }
    .bcbtnwrap{
        width: 700px;
        border-top: 1px solid #dfdfdf;
    }
    .bcbtns{
        margin-left: 50px;
    }
    .bcbtn{
        margin-left: 50px;
        background: #FFB600;
        display: block;
        color: #fff;
        padding: 0 11px;
        background-position: 100% -320px;
        border: 0;
        cursor: pointer;
        line-height: 22px;
        height: 22px;
    }
</style>
